<template>
	<view class="order-confirm">
		<view v-if="order_info">
			<view class="order-info">
				<text>需支付</text>
				<text class="account">￥{{order_info.order_amount}}</text>
			</view>
			<view class="pay-container">
				<gyd-pay-type :order_type="order_type" @change="payTypeChange"></gyd-pay-type>
			</view>
			<view class="tool-bar">
				<view class="inner">
					<view class="total-price">
						支付：
						<text class="money">￥{{order_info.order_amount}}</text>
					</view>
					<button class="pay-btn" type="primary" @click="getPayInfo">确认支付</button>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="order-emty">
				<view class="title">订单信息异常</view>
				<view class="btn-group">
					<button class="btn" type="default" plain="true">返回</button>
					<button class="btn" type="primary" plain="true">首页</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import util from '@/utils/util';
	import cache from '@/utils/cache';
	import {
		ref,
		reactive,
		toRefs,
	} from 'vue';

	import {
		onLoad,
		onReady,
	} from '@dcloudio/uni-app';

	const order_info = ref(null);

	let pay_type = 'wxpay';

	let order_id = 0;
	let order_type = 'order';
	let order_tag = '';
	let is_h5 = false;
	let is_app = false;

	onLoad((opt) => {
		if (opt.hasOwnProperty('order_id')) {
			order_id = opt.order_id;
		}
		if (opt.hasOwnProperty('order_type')) {
			order_type = opt.order_type;
		}
		if (opt.hasOwnProperty('order_tag')) {
			order_tag = opt.order_tag;
		}
		// #ifdef H5
		is_h5 = true;
		// #endif
		// #ifdef APP
		is_app = true;
		// #endif
	});

	onReady(() => {
		getData();
	});

	const payTypeChange = (data) => {
		pay_type = data.id
	};

	const getData = () => {
		if (!order_info.value) {
			uni.showLoading({
				title: '加载中...'
			})
		}
		request.post(order_type + '/detail', {
			id: order_id,
		}).then((res) => {
			uni.hideLoading();
			order_info.value = res.data;
		}).catch((err) => {
			console.log(err)
			uni.hideLoading();
			uni.showToast({
				title: err.msg || '网络错误',
				duration: 1000,
				icon: 'none'
			});
		});
	};

	const getPayInfo = () => {
		uni.showLoading({
			title: '加载中...'
		})
		request.post('payment/pay_order', {
			order_id: order_id,
			order_type: order_type,
			order_tag: order_tag,
			pay_type: pay_type,
			is_h5: is_h5 ? 1 : 0,
			is_app: is_app ? 1 : 0,
		}).then((res) => {
			console.log('调起支付参数', res);
			uni.hideLoading();
			doPay(res.data);
		}).catch((err) => {
			console.log(err)
			uni.hideLoading();
			uni.showToast({
				title: err.msg || '网络错误',
				duration: 1000,
				icon: 'none'
			});
		});
	};

	const doPay = (code_str) => {
		// #ifdef APP-PLUS
		uni.requestPayment({
			provider: pay_type,
			orderInfo: code_str,
			success: (e) => {
				uni.showToast({
					title: "支付成功",
					duration: 2000,
					success: () => {
						pay_ok();
					}
				})
			},
			fail: (e) => {
				uni.showModal({
					content: "支付失败,原因为: " + e.errMsg,
					showCancel: false
				})
			}
		});
		// #endif

		// #ifdef MP-WEIXIN
		uni.requestPayment({
			appId: code_str.appId, //小程序ID，由商户传入
			nonceStr: code_str.nonceStr, //随机串
			timeStamp: code_str.timeStamp, //时间戳，自1970年以来的秒数
			package: code_str.package,
			paySign: code_str.paySign, //微信签名
			signType: code_str.signType, //微信签名方式
			success(resp) {
				if (resp.errMsg == "requestPayment:ok") {
					pay_ok();
				}
			},
			fail(e) {
				if (e.errMsg == "requestPayment:fail cancel") {
					uni.showToast({
						title: "支付已取消！",
						icon: 'error'
					});
				} else {
					console.log(e.errMsg)
					uni.showToast({
						title: "错误：" + e.errMsg,
						icon: 'error'
					});
				}
			}
		})
		// #endif

		// #ifdef H5
		let jsApiParameters = JSON.parse(code_str);
		WeixinJSBridge.invoke(
			'getBrandWCPayRequest', jsApiParameters,
			(res) => {
				if (res.err_msg == "get_brand_wcpay_request:ok") {
					uni.showToast({
						title: "支付成功",
						duration: 2000,
						success: () => {
							pay_ok();
						}
					})
				} else {
					if (res.err_msg == 'get_brand_wcpay_request:cancel') {
						uni.showModal({
							content: "操作取消",
							showCancel: false
						})
					} else {
						uni.showModal({
							content: "支付失败,原因为: " + res.err_msg,
							showCancel: false
						})
					}
				}
			}
		);
		// #endif
	};

	const pay_ok = () => {
		uni.$emit('pay_ok', {
			msg: '页面更新'
		});
		setTimeout(() => {
			if (order_type == 'order') {
				uni.redirectTo({
					url: `/pages/order/order`
				});
			} else if (order_type == 'recharge') {
				uni.redirectTo({
					url: '/pages/beans/beans'
				})
			} else {
				uni.navigateBack({});
			}
		}, 1500);
	};
</script>

<style lang="scss">
	.order-confirm {
		.order-info {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;

			.account {
				margin-top: 30upx;
				font-size: 60rpx;
				color: #ff5400;
			}
		}

		.pay-container {
			margin-top: $m24;
		}

		.tool-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			width: 100%;
			padding-bottom: env(safe-area-inset-bottom);
			background-color: #fff;
			box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);

			.inner {
				@include f-between;
				height: 98rpx;
				padding: 0 $m24;

				.total-price {
					font-size: $font-32;

					.money {
						font-size: $font-36;
						font-weight: bold;
						color: $error-color;
					}
				}

				.pay-btn {
					margin: 0;
					padding: 0 2em;
				}
			}
		}

		.order-emty {
			.title {}

			.btn-group {
				.btn {}
			}
		}
	}
</style>